<template>
  <my-card
    title="销售额统计"
    style="flex-grow: 1"
    ref="box"
    v-loading="loading"
  >
    <el-radio-group v-model="status" size="small" @change="getData">
      <el-radio-button
        v-for="item in option"
        :key="item.key"
        :label="item.value"
        >{{ item.label }}
      </el-radio-button>
    </el-radio-group>
    <echarts v-if="chartH" :options="options" :height="chartH" width="100%" />
  </my-card>
</template>

<script>
import echarts from "@/plugins/components/echarts/echarts.vue";
import { CodeToText, provinceAndCityData } from "element-china-area-data";
export default {
  components: { echarts },
  data() {
    return {
      loading: false,
      status: 0,
      option: [
        { label: "本月", value: 0 },
        { label: "今年", value: 1 }
      ],
      year: new Date().getFullYear() + "",
      provinceData: [],
      countData: [],
      priceData: [],
      chartH: 0
    };
  },
  watch: {},
  computed: {
    options() {
      return {
        // color: ["#90c4fd"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        grid: {
          right: "100",
          left: "60",
          bottom: "110"
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: ["订单数", "订单金额"]
        },

        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: this.provinceData,
            axisLabel: {
              interval: 0,
              // rotate: 0,
              formatter: function(value) {
                return value.split("").join("\n");
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "订单数",
            position: "left",
            splitNumber: 1,
            axisLine: {
              lineStyle: {
                // color: colors[0]
              }
            },
            axisLabel: {
              formatter: "{value} 个"
            }
          },
          {
            type: "value",
            name: "订单金额",
            position: "right",
            axisLine: {
              lineStyle: {
                // color: colors[1]
              }
            },
            axisLabel: {
              formatter: "{value} 元"
            }
          }
          // {
          //   type: "value",
          //   name: "温度",
          //   min: 0,
          //   max: 25,
          //   position: "left",
          //   axisLine: {
          //     lineStyle: {
          //       // color: colors[2]
          //     }
          //   },
          //   axisLabel: {
          //     formatter: "{value} °C"
          //   }
          // }
        ],
        series: [
          {
            name: "订单数",
            type: "bar",
            data: this.countData
          },
          {
            name: "订单金额",
            type: "bar",
            yAxisIndex: 1,
            data: this.priceData
          }
        ]
      };
    }
  },
  methods: {
    async getData() {
      this.loading = true;
      const [err, res] = await this.$Api.getApi("statistics").get("report", {
        params: {
          type: this.status
        }
      });
      this.loading = false;
      if (!err && res) {
        let provinceData = [];
        let countData = [];
        let priceData = [];
        provinceAndCityData.forEach(({ value, label }) => {
          provinceData.push(label);
          const t = res.find(j => j.province === value);
          if (t) {
            countData.push(t.orderNum);
            priceData.push(t.realPrice);
          } else {
            countData.push(0);
            priceData.push(0);
          }
        });
        this.provinceData = provinceData;
        this.countData = countData;
        this.priceData = priceData;
      }
    }
  },
  created() {
    // this.getData();
  },
  mounted() {
    let ret = this.$refs.box.$el.offsetHeight - 33 - 47 - 35;
    ret = Math.max(400, ret);
    this.chartH = ret + "px";
  }
};
</script>
<style lang="scss" scoped></style>
